/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="resource-trend-warp">
        <div class="resource-trend__hand">
            <span class="hand__label">自动刷新时间：10s</span>
            <div class="hand__opt">
                <lang class="opt__label">展示最近：</lang>
                <link-btn ref="hoverLink"> {{ timeLabel }}
                    <i class="sf-comp-iconfont icon-comp-angle-down"/>
                </link-btn>
                <sf-menu anchor="bottom" default-target="hoverLink">
                    <sf-menu-item v-for="item in TIME_OPTIONS_RESOURCE" :key="item.value"
                                  @click="changeTime(item.value)">
                        {{ item.label }}
                    </sf-menu-item>
                </sf-menu>
            </div>
        </div>
        <div class="resource-trend__cards">
            <div class="cards__item">
                <cpu-card :id="id" :time="timeUnit"></cpu-card>
            </div>
            <div class="cards__item">
                <memory-card :id="id" :time="timeUnit"></memory-card>
            </div>
            <div class="cards__item">
                <gpu-card :id="id" :time="timeUnit"></gpu-card>
            </div>
            <div class="cards__item">
                <data-card :id="id"></data-card>
            </div>
        </div>
    </div>
</template>

<script>
import LinkBtn from 'src/components/link_btn.vue';
import CpuCard from './components/cpu_card.vue'
import GpuCard from './components/gpu_card.vue'
import DataCard from './components/data_card.vue'
import MemoryCard from './components/memory_card.vue'
import {TIME_OPTIONS_RESOURCE, HALF_HOUR} from 'src/home/mod_cluster/common/resource/const.js';

export default {
    components: {LinkBtn, CpuCard, GpuCard, DataCard, MemoryCard},
    data() {
        return {
            timeUnit: HALF_HOUR,
            id: '',
        }
    },
    computed: {
        timeLabel() {
            return TIME_OPTIONS_RESOURCE.find(item => item.value === this.timeUnit).label
        },
        TIME_OPTIONS_RESOURCE() {
            return TIME_OPTIONS_RESOURCE
        }
    },
    methods: {
        changeTime(value) {
            this.timeUnit = value
        }
    },
}
</script>

<style lang="less" scoped>
.resource-trend-warp {
    padding: 8px 20px 0 20px;
    
    .resource-trend {
        &__hand {
            display: flex;
            justify-content: space-between;
            
            .hand__label {
                width: 104px;
                height: 17px;
                font-size: 12px;
                color: #3D3D3D;
            }
            
            .hand__opt {
                .opt__label {
                    width: 60px;
                    height: 17px;
                    font-size: 12px;
                    color: #3D3D3D;
                }
            }
        }
        
        &__cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 12px;
            
            .cards__item {
                margin-bottom: 16px;
                width: 452px;
                height: 312px;
                padding: 8px 20px 16px 20px;
                background: #FFFFFF;
            }
        }
    }
}
</style>
